<header class="modal-header" data-test-modal="new-subscriber">
    <h1>Add a Subscriber</h1>
</header>
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
<a class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
    {{svg-jar "close"}}<span class="hidden">Close</span>
</a>

<div class="modal-body">
    <fieldset>
        {{#gh-form-group errors=subscriber.errors hasValidated=subscriber.hasValidated property="email"}}
            <label for="new-subscriber-email">Email Address</label>
            <input type="email"
                value={{subscriber.email}}
                oninput={{action "updateEmail" value="target.value"}}
                id="new-subscriber-email"
                class="gh-input email"
                placeholder="Email Address"
                name="email"
                autofocus="autofocus"
                autocapitalize="off"
                autocorrect="off"
                data-test-input="new-subscriber-email">
            {{gh-error-message errors=subscriber.errors property="email" data-test-error="new-subscriber-email"}}
        {{/gh-form-group}}

    </fieldset>
</div>

<div class="modal-footer">
    <button class="gh-btn"
        {{action "closeModal"}}
        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
        {{action (optional noop) on="mouseDown"}}
        data-test-button="cancel-new-subscriber"
    >
        <span>Cancel</span>
    </button>
    {{gh-task-button "Add"
        successText="Added"
        task=addSubscriber
        class="gh-btn gh-btn-green gh-btn-icon"
        data-test-button="create-subscriber"}}
</div>
